<template>
  <div class="dialog_info">
    <div class="dialog_info_title" >
        <!-- 左侧 -->
        <el-col :span="12" class="leftList" style="height: 100%;" >
          <div class="JibenTable">
            <ul>
              <li><div><div>名称：</div><div>{{TybDetailDataList.NAME ? TybDetailDataList.NAME : '--' }}</div></div></li>
              <li><div><div>编码：</div><div>{{TybDetailDataList.CODE ? TybDetailDataList.CODE : '--' }}</div></div></li>
              <li><div><div>经度：</div><div>{{TybDetailDataList.LGTD ? TybDetailDataList.LGTD : '--' }}</div></div></li>
              <li><div><div>纬度：</div><div>{{TybDetailDataList.LTTD ? TybDetailDataList.LTTD : '--' }}</div></div></li>
              <li><div><div>类型：</div><div>{{TybDetailDataList.TYPE ? TybDetailDataList.TYPE : '--' }}</div></div></li>
              <li><div><div>沟宽(m)：</div><div>{{TybDetailDataList.LENGTH ? TybDetailDataList.LENGTH : '--' }}</div></div></li>
              <li><div><div>沟深(m)</div><div>{{TybDetailDataList.HEIGHT ? TybDetailDataList.HEIGHT : '--' }}</div></div></li>
              <li><div><div>断面形态：</div><div>{{TybDetailDataList.CURVE ? TybDetailDataList.CURVE : '--' }}</div></div></li>
              <li><div><div>阻水面积比R1/%：</div><div>{{TybDetailDataList.SR1 ? TybDetailDataList.SR1 : '--' }}</div></div></li>
              <li><div><div>阻水库容V/万m³：</div><div>{{TybDetailDataList.V ? TybDetailDataList.V : '--' }}</div></div></li>
              <li><div><div>河流代码：</div><div>{{TybDetailDataList.RIVL ? TybDetailDataList.RIVL : '--' }}</div></div></li>
              <li><div><div>备注：</div><div>{{TybDetailDataList.REMARK ? TybDetailDataList.REMARK : '--' }}</div></div></li>
            </ul>
          </div>
        </el-col>

        <!-- 右侧 -->
        <el-col :span="11" class="rightDetailArea" style="height: 100%;">
            <div style="display: flex; flex-direction: column; justify-content: center;align-items: center;">
            <!-- 轮播图 -->
            <template>
              <div  v-if="TybDetailDataList.PICPATH.length>0" class="block imgList">
                <el-carousel height="100%"  :arrow="TybDetailDataList.PICPATH.length== 1? 'never' : 'always'">
                  <el-carousel-item v-for="(item, i) in TybDetailDataList.PICPATH" :key="i">
                    <img :src="item">
                    <div>{{ item }}</div>
                  </el-carousel-item>
                </el-carousel>
              </div>
              <div  v-else-if="TybDetailDataList.PICPATH.length<=0"  class="imgList noImgList">
                  <div class="empty"> </div>
                  <img src="@/assets/dialog/noImgIcon.png" alt="">
              </div>
            </template>
            </div>

        </el-col>

    </div>
  </div>
</template>
<script>


export default {
  components: { },
  data() {
      return {
          // 页面数据
          TybDataList: [],
          // 详情数据
          TybDetailDataList:{},
          parameter: {},
          PionId:undefined, //选中的点

      }
  },
  computed: {
      basin() {
          return this.$store.getters.basin
      }
  },
  watch: {
      
  },
  created() {
      this.parameter = this.$store.getters.dlgParams.remarks
      this.getData() // 获取数据
      console.log('点击的点',this.parameter);
      
  },
  methods: {
      // 获取数据
      getData(){
          this.TybDetailDataList =this.parameter
          
          // var url = `${mapConfig.resUrlPre}/geojson/${this.basin}/TYB.json`
          // this.$axios.get(url).then(res => {
          //     this.TybDataList = res.data.features;
          //     console.log('TYB数据',this.TybDataList);
              
          //     res.data.features.map((item) => {
          //         if(item.properties.PID == this.parameter.PID){
          //             this.TybDetailDataList = item;
          //             this.PionId=item.properties.PID
          //         }
          //     })
          // })
      },



     
  }
}
</script>
<style lang="less" scoped>
.tab{
      border-bottom: 1px solid #335875;
      padding-bottom: 15px;
      height: auto;
      overflow: hidden;
  }
/deep/.el-tabs__nav-scroll {
  justify-content: left !important;
}

.dialog_info {
  height: 100%;
  min-height:60vh;
  padding-top:10px;
  padding:10px 0px 20px  20px;
  box-sizing: border-box;
  .dialog_info_title {
    height: 100%;
    /deep/.el-tabs {
      height: 100%;
    }
  }

}

/deep/.el-tab-pane {
  height: 100%;
}
.water-table{
  height: calc(100% - 40px);
  padding:0px 20px;
  height: 700px;
}
.timeline {
  width: 100%;
  height: 97%;
  padding: 20px;
  overflow: auto;
  position: relative;
  color: #fff;

  .timelineList {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    margin-bottom: 10px;

    .timeline_left {
      width: 200px;
      padding-right: 20px;
      text-align: right;

      .timeline_title {
        font-size: 16px;
        font-weight: bold;
        color: #00e9ff;
      }
    }

    .timeline_right {
      position: relative;
      padding-left: 3%;
      width: calc(~"100% - 220px");
    }

    .timeline_right:after {
      content: "";
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #649ff4;
      box-shadow: 0 0 10px #3484f7;
      position: absolute;
      top: 0;
      left: -6px;
      z-index: 9;
    }
  }
}

.timeline::after {
  content: "";
  width: 3px;
  height: 100%;
  background: #1b1670;
  position: absolute;
  top: 0;
  left: 220px;
}
.noData{
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  margin:0px;
}

// 左侧列表
.leftList{
  padding: 5px;
  padding-top: 10px;
  margin-right: 20px;
}

//列表区域

.JibenTable {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
  ul{
      display: flex;
      flex-wrap: wrap;
      background: rgba(0,165,233,0.2);
      font-size: 14px;
      padding: 0 10px ;
      width: 100%;
      li{
          box-sizing: border-box;
          width: 50%;
          border-bottom: 1px solid #3F72AA ;
          &>div{
            margin-bottom:10px ;
            margin-top:10px;
            border-left: 1px solid #3F72AA ;
            text-indent: 20px;
            background: url(../../assets/newimg/矩形.png) no-repeat left center;
            background-size: auto 66%;
            background-position:8px 8px ;
            &>:nth-child(1){
              color: #A5C2D8;
              margin-bottom: 4px;
            }
          }
      }
      &>:nth-last-child(1),>:nth-last-child(2){
        border: none;
      }
      &>:nth-child(2n-1){
        &>div{
            text-indent: 10px !important;
            border: none;
            background-position:0 8px !important ;
        }
      }
  }
}

.rightDetailArea{
margin-top: 20px;
}
.imgList {
  width: 610px;
  height: 487px;
  background: url(../../assets/dialog/tukuang.png) no-repeat center;
  background-size: 100% 100%;

  img {
      width: 100%;
      height: 100%;
  }

  /deep/.el-carousel__item,
  /deep/.el-carousel {
      //height: 220px;
      height: 100%;
  }
}

.noImgList {
  display: flex;
  justify-content: center;
  align-items: center;
  img{
  width:100px;
  height:120px;
  }
}

</style>
